Best of Modern JavaScript — Variables and Destructuring

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at JavaScript variables and destructuring.

The Global Object

The global object is in Node.js and browser-side JavaScript is more of a bug than a feature.

Its performance is poor.

Global objects are global variables.

In the global scope, var declarations declare global object properties.

Function declarations also declare global object properties.

let , const and class declarations don’t add properties to the global object when we create them in the global scope.

Function Declarations and Class Declarations

Function declaration are block-scoped like let .

They create properties of the global object within the global scope like var .

They’re also hosted so they’re independent of where their location in the code with regards to availability.

For instance, if we have:

{
  console.log(foo());
  function foo() {
    return 'hello';
  }
}

then we can call foo without errors since foo is hoisted.

Class declarations are block-scoped, don’t create properties on the global object, and aren’t hoisted.

They create functions underneath the hood, but they still aren’t hoisted.

For instance, if we have:

{
  const identity = x => x;
  const inst = new Foo();
  class Foo extends identity(Object) {}
}

Then we’ll get an ReferenceError because Foo isn’t defined before it’s invoked.

const versus let versus var

The best ways to declare variables are with const first.

They can’t be changed by reassignment so it’s harder to make mistakes with them.

However, we can still change the content inside whatever it’s assigned to it.

For example, we can write:

`const` `foo` `=` `{};`
`foo.prop` `=` `123;`

We can use const in loops:

for (const x of ['a', 'b']) {
   console.log(x);
 }

Since x is created for each iteration of the loop, we can use const with the loop.

Otherwise, we can use let when we need to change a variable later.

For example, we can write:

let counter = 0;
counter++;

let obj = {};
obj = { foo: 'bar' };

We should never use var and they should only appear in legacy code.

Destructuring

Destructuring is a convenient way to extract multiple values from arrays and objects.

The arrays and objects can be nested.

Object Destructuring

We can destructure objects by writing:

const obj = {
  firstName: 'james',
  lastName: 'smith'
};
const {
  firstName: f,
  lastName: l
} = obj;

We created an object obj and then we assigned it to the expression on the second statement.

This will get the firstName property and assign it to f .

And it’ll do the same with lastName and assign it to l .

Destructuring is also helpful with processing return values.

For example, we can write:

const obj = {
  foo: 'bar'
};

const {
  writable,
  configurable
} =
Object.getOwnPropertyDescriptor(obj, 'foo');

console.log(writable, configurable);

We called the Object.getOwnPropertyDescriptor method, which takes an object and a property key.

And it returns an object with writable and configurable properties.

So we can use destructuring to get the properties and assign them to variables.

Conclusion

We can follow some best practices with declaring variables.

Also, destructuring is handy for is getting variables from objects and arrays.